<template>
  <div
    class="card-container"
    :style="{
      width: props.width ? props.width : '315px',
      height: props.height ? props.height : '260px',
      backgroundColor: `rgba(${props.note?.color},0.3)`
    }"
  >
    <div class="top">
      <span class="left-time">{{ formaDate(props.note?.create_time) }}</span>
      <span class="right-label">{{ props.note?.label }}</span>
    </div>
    <div class="mid">
      <div class="content">
        <span v-if="props.note?.content">{{ props.note?.content }}</span>
        <span style="color: #888" v-else> 未填写留言 </span>
      </div>
    </div>
    <div class="bottom">
      <span class="left-count">
        <span class="iconfont icon-aixin1" @click="like(props.note)">{{
          props.note?.like_count
        }}</span>
        <span class="iconfont icon-liuyan">{{ props.note?.comment_count }}</span>
      </span>
      <span class="right-name">{{ props.note?.user_name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addFeedbackAPI, deleteFeedbackAPI, isFeedbackAPI } from '@/api/note'
import moment from 'moment'
import { useUserStore } from '@/stores/modules/user'
import { bus } from '@/utils/mitt'
const userStore = useUserStore()
const props = defineProps<{
  width?: string
  height?: string
  color?: string
  note: Note
}>()

// 处理日期
const formaDate = (date: string) => {
  return moment(date).format('MM/DD HH:mm')
}
const like = async (item: Note) => {
  const res = await isFeedbackAPI(userStore.user as string, item.id, 0)
  if (res.data) {
    await deleteFeedbackAPI(userStore.user as string, item.like_count, item.id)
    bus.emit('getNoteList')
    emitEvent()
    return
  }
  await addFeedbackAPI({
    wall_id: item.id,
    user_id: userStore.user as string,
    type: 0,
    like_count: item.like_count
  })
  bus.emit('getNoteList')
  emitEvent()
}
const emit = defineEmits(['child-event'])
const emitEvent = () => {
  emit('child-event')
}
</script>

<style scoped lang="scss">
.card-container {
  background-color: rgba(212, 212, 212, 0.3);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .top {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 13px;
      color: $gray-2;
    }
  }

  .mid {
    flex: 1;
    padding: 15px 0;
    .content {
      font-size: 14px;
      color: $gray-0;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;

    .left-count {
      color: $gray-2;
      span {
        margin-right: 15px;
      }
    }

    .right-name {
      font-weight: 500;
      font-size: 16px;
    }
  }
}
</style>
